<template>
  <section class="page">
    <headerbar>
      {{title}}
    </headerbar>
    <fetchData  class="bg-white" :loading="isLoading" :data="detail"></fetchData>
    <section class="bg-white">
      <section class="detail">
        <h1 class="title">{{detail.contentTitle}}</h1>
        <p class="line"></p>
        <div class="cont-text" v-html="makeTargetToWindowOpen(detail.contents)"></div>
        <p class="pdv-2"></p>
      </section>
    </section>
    <abnormal  @refresh="loadData" v-if="abnormal"></abnormal>
  </section>
</template>

<script>
  import _ from 'lodash'
  import {makeTargetToWindowOpen} from '@/utils/H5Adapt'
  export default {
    name: 'notifyDetail',
    data () {
      return {
        abnormal: false,
        preData: {},
        detail: {},
        isLoading: true,
        title: '更新通知',
      }
    },
    watch:{
      $route(to,from){
        console.log(to.path);
        this.loadData ()
      }
    },
    created () {
      this.loadData()
    },
    beforeDestroy () {
    },
    methods: {
      makeTargetToWindowOpen,
      loadData () {
        this.abnormal = false
        this.isLoading = true
        let id = this.$route.params.id
        this.fetchService.notifyDetail(id).then(res => {
          if (res.code === 0) {
            this.detail = res.data
            this.title = res.data.type
          }
          if (res.code == 444) {
            this.abnormal = true
          }
          this.isLoading = false
        })
      },
    }
  }
</script>

<style lang="scss" scoped>
  @import "@/common/stylus/moon.scss";
  .detail .title {
    text-align: center;
    width: 100%;
  }
</style>
